<script>
  import Tooltip from 'ant-design-vue/es/tooltip'
  import { cutStrByFullLength, getStrFullLength } from '@/components/_util/util'
  /*
      const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;

      const TooltipOverlayStyle = {
        overflowWrap: 'break-word',
        wordWrap: 'break-word',
      };
    */

  export default {
    name: 'Ellipsis',
    components: {
      Tooltip
    },
    props: {
      prefixCls: {
        type: String,
        default: 'ant-pro-ellipsis'
      },
      tooltip: {
        type: Boolean
      },
      length: {
        type: Number,
        required: true
      },
      lines: {
        type: Number,
        default: 1
      },
      fullWidthRecognition: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      getStrDom (str, fullLength) {
        return (
          < span > { cutStrByFullLength (str, this.length
      )
        +(fullLength > this.length ? '...' : '')
      }<
        /span>
      )
      },
      getTooltip (fullStr, fullLength) {
        return (
          < Tooltip >
          < template
        slot = 'title' > { fullStr } < /template>
        {
          this.getStrDom(fullStr, fullLength)
        }
      <
        /Tooltip>
      )
      }
    },
    render () {
      const { tooltip, length } = this.$props
      const str = this.$slots.default.map(vNode => vNode.text).join('')
      const fullLength = getStrFullLength(str)
      const strDom = tooltip && fullLength > length ? this.getTooltip(str, fullLength) : this.getStrDom(str, fullLength)
      return (
        strDom
      )
    }
  }
</script>
